<template>
  <div class="container">

    <!-- -----------------------------------------------------------------过滤器一栏---------------------------------- -->
    <div class="filter-container">
      <el-input
        v-model="listQuery.name"
        :placeholder="table.name"
        style="width: 200px;"
        class="filter-item"
      />
      <el-select
        v-model="listQuery.class"
        :placeholder="table.class"
        clearable
        style="width: 120px"
        class="filter-item"
      >
        <el-option
          v-for="item in options.classOptions"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-select
        v-model="listQuery.publishedTime"
        :placeholder="listQuery.publishedTime"
        clearable
        style="width: 130px;"
        class="filter-item"
      >
        <el-option
          v-for="item in options.publishedTimeOptions"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-button
        type="primary"
        icon="Search"
        style="margin-left: 50px;"
      >
        {{ table.search}}
      </el-button>
      <el-button
        style="margin-left: 10px"
        type="primary"
        icon="Edit"
        @click="publishHw"
      >
        {{ table.publishHw}}
      </el-button>
    </div>


    <!-- -----------------------------------------------------------------作业管理表格栏---------------------------------- -->
    <div class="table-container">
      <el-table
        :data="classgradeData"
        border
        fit
        highlight-current-row
        height="100%"
        max-height="100%"
        scrollbar-always-on=true
        style="width: 100%"
      >
        <el-table-column
          :label="table.number"
          type="index"
          align="center"
          width="80px"
        >
        </el-table-column>
        <el-table-column
          :label="table.name"
          prop="title"
          width="180px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          :label="table.class"
          prop="classgradeName"
          width="180px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          :label="table.publishedTime"
          prop="publishedTime"
          width="180px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          :label="table.finRate"
          prop="finRate"
          width="150px"
        >
        </el-table-column>
        <el-table-column
          :label="table.corRate"
          prop="corRate"
          width="150px"
        >
        </el-table-column>
        <el-table-column
          :label="table.actions"
          align="center"
          min-width="100px"
        >
          <template #default="scope">
            <el-button
              type="primary"
              size="mini"
              @click="checkDetailedInfo(scope.row)"
            >
              {{ table.detail}}
            </el-button>
            <!-- <el-button
              size="mini"
            >
              {{ table.edit }}
            </el-button> -->
            <el-button
              size="mini"
              @click="deleteHw(scope.row)"
            >
              {{ table.delete }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>      
    </div>
  </div>
</template>

<script>
import {  reactive, toRefs } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// import axios from '@/utils/axios'
// import { ElMessage } from 'element-plus'
export default {
  name: 'Good',
  setup() {
    const state = reactive({
      loading: false,
      tableData: [], // 数据列表
      multipleSelection: [], // 选中项
      total: 0, // 总条数
      currentPage: 1, // 当前页
      pageSize: 10 // 分页大小
    })
    const dataMap = reactive({
        listQuery: {
            page: 1,
            limit: 10,
            name: "作业名称",
            class: "所属班级",
            publishedTime: "发布时间",
            
        },
        table: {
            number: "序号",
            name: "名称",
            class: "所属班级",
            publishedTime: "发布时间",
            finRate: "完成比率： %",
            corRate: "批阅比率： %",
            actions: "操作",
            detail: "查看详情",
            edit: "编辑信息",
            delete: "删除作业",
            search: "搜索",
            publishHw: "布置作业"
            
            
        },
        options: {
            classOptions: ["小葵花课堂","小菊花课堂","小牡丹课堂"],
            publishedTimeOptions: ["今日","一周内","一个月内","一个月前"]
        },
        classgradeData: [],
        getData(){        
          var _this = this    
          this.$axios
              .get('teacher/subject/basicinfo')
              .then( response => {
                  let stateCode = response.headers["state"]
                  if(stateCode=="200"){
                    dataMap.classgradeData = response.data
                  }
                  else if(stateCode==null){
                      this.$message.success("请求数据异常！")
                  }
                  else{
                      this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
                  }

              })
              .catch(function (error){
                  let stateCode = error.response.headers["state"]                            
                  if(stateCode!=""){
                      _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
                  }
                  else{
                      _this.$message.error("后端异常")
                  }
              })
              .then(function (){
                  console.log("测试成功")
              }) 
        }
    })
    
    return {
      ...toRefs(state),
      ...toRefs(dataMap)
    }
  },
  methods: {
    publishHw() {
      this.$router.push({
          path: '/teacher/publishhw',
          name:  "TeacherPublishHw"
      })
    },
    checkDetailedInfo(rowData) {
      this.$router.push({
          path: '/teacher/hwdetailedinfo',
          name:  "TeacherHwDetailedInfo",
          params: {
            id: rowData.id
          }
      })
      // console.log("****************************")
      // console.log(rowData)
      // console.log("****************************")
    },
    deleteHw(rowData){
      var _this = this
          ElMessageBox.confirm('你确定删除作业"' + rowData.title +  '"吗？', '警告',
              {
                  confirmButtonText: 'Yes',
                  cancelButtonText: 'Cancel',
                  type: 'warning',
              }
          )
              .then(() => {
                let formData = new FormData()
                formData.append("subId",rowData.id)
                this.$axios
                    .post('/subject/del', formData)
                    .then( response => {
                        let stateCode = response.headers["state"]
                        if(stateCode=="200"){
                          location.reload()
                        }
                        else if(stateCode==null){
                            this.$message.success("请求数据异常！")
                        }
                        else{
                            this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
                        }

                    })
                    .catch(function (error){
                        let stateCode = error.response.headers["state"]                            
                        if(stateCode!=""){
                            _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
                        }
                        else{
                            _this.$message.error("后端异常")
                        }
                    })
                    .then(function (){
                        console.log("测试成功")
                    }) 
                      })
              .catch(() => {
                  ElMessage({
                      type: 'error',
                      message: '已取消删除',
                  })
              })
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

<style scoped>
  .container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  .el-card.is-always-shadow {
    min-height: 100%!important;
  }

  .filter-container {
    height: 5%;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
  }
  
  .filter-item {
    display: inline-block;
  }

  .table-container {
    height: 95%;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }
</style>